<template>
  <div>
    <div class="title">
      <i class="el-icon-edit">编辑/添加产品</i>
      <el-button type="primary" icon="el-icon-s-unfold" size="small"
        >返回产品列表</el-button
      >
    </div>
    <div class="product_data">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品种类">
          <el-select v-model="form.region" placeholder="请选择种类">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input-number
            v-model="num"
            :min="1"
            :max="10"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="input" placeholder="请输入商品价格"></el-input>&nbsp;&nbsp;&nbsp;元
        </el-form-item>
        <el-form-item label="商品特色">
          <el-radio-group v-model="form.resource">
            <el-radio label="热销"></el-radio>
            <el-radio label="推荐"></el-radio>
            <el-radio label="会员特惠"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="口味种类">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="水果" name="type"></el-checkbox>
            <el-checkbox label="芝士" name="type"></el-checkbox>
            <el-checkbox label="酸奶" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="优惠活动">
          <el-select v-model="form.region" placeholder="请选择种类">
            <el-option label="生日会85折" value="shanghai"></el-option>
            <el-option label="会员特价" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            v-model="form.desc"
            :rows="5"
            autosize
            placeholder="请输入商品详细描述"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: -70px; margin-bottom: 0px">
          <el-button type="primary" @click="onSubmit" style="margin-left: 0"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    handleRemove(file) {
    //console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
    //console.log(file);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  background-color: white;
  font-size: 15px;
  padding: 5px;
  border-radius: 5px;
  // text-align: left;
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 40px !important;
  .el-icon-edit {
    height: 20px;
    line-height: 30px;
    font-weight: 900;
  }
}
.product_data {
  border-radius: 5px;
  text-align: left;
  width: 100%;
  margin-top: 10px;
  background-color: white;
  padding: 10px;
  // height: 800px;
  .el-form {
    width: 100%;
    .el-input,.el-textarea{
      width: 30%;
    }
    ::v-deep .el-upload__input {
      display: none;
    }
  }
}
</style>